@prefix-message-item: ~'@{nameSpace}-message-item';

.@{prefix-message-item} {
  pointer-events: all;
  box-shadow: 0 0 4px 0 rgba(var(--design-rgba-distant), 0.2);
  border-radius: var(--design-border-radius-lg);
  overflow: hidden;
  font-size: var(--design-font-size-base);
  width: 480px;
  height: 48px;

  @media screen and (max-width: 700px) {
    width: 80%;
    height: 48px;
  }

  .@{prefix-message-item}-base {
    height: 100%;
    padding: 0 18px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    align-items: center;
    color: var(--design-text-color-5);

    .@{prefix-message-item}-icon {
      .flex-center()
    }

    .@{prefix-message-item}-content {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-overflow: ellipsis;

      .@{prefix-message-item}-content {
        flex: 1;
      }
    }

    .@{prefix-message-item}-opration {
      cursor: pointer;

      &:hover {
        color: var(--design-text-color-4);
      }
    }
  }

  .@{prefix-message-item}-default {
    background: var(--design-bg-color-5);
  }

  .@{prefix-message-item}-primary {
    background: var(--design-base-color-7);
  }

  .@{prefix-message-item}-success {
    background: var(--design-success-color-7);
  }

  .@{prefix-message-item}-error {
    background: var(--design-error-color-7);
  }

  .@{prefix-message-item}-warning {
    background: var(--design-warning-color-7);
  }
}